<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="88px">
      <el-form-item label="日期：" prop="type">
        <el-date-picker v-model="dateTime" type="date" size="small" :editable="false"  value-format="yyyy-MM-dd" @change="onChangeDate"
          :picker-options="pickerOptions" placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="园所名称：" prop="name">
        <el-select v-model="queryParams.name" @change="selectSchool" clearable filterable placeholder="请选择园所名称">
          <el-option v-for="item in schoolList" :key="item.code" :label="item.title" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级：" prop="class">
        <el-select v-model="queryParams.class" placeholder="请选择班级" clearable size="small"
          :disabled="queryParams.name == '' ? true : false">
          <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="身高：" prop="heightStatus">
        <el-select v-model="queryParams.heightStatus" placeholder="请选择身高" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="偏低" :value="1" />
          <el-option label="过高" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="体重：" prop="weightStatus">
        <el-select v-model="queryParams.weightStatus" placeholder="请选择体重" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="偏瘦" :value="1" />
          <el-option label="偏胖" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="体温：" prop="temperatureStatus">
        <el-select v-model="queryParams.temperatureStatus" placeholder="请选择体温" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
          <el-option label="未检出" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="牙齿：" prop="teethStatus">
        <el-select v-model="queryParams.teethStatus" placeholder="请选择牙齿" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="眼睛：" prop="eyeStatus">
        <el-select v-model="queryParams.eyeStatus" placeholder="请选择眼睛" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="手部：" prop="handStatus">
        <el-select v-model="queryParams.handStatus" placeholder="请选择手部" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="口腔：" prop="oralStatus">
        <el-select v-model="queryParams.oralStatus" placeholder="请选择口腔" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="指甲：" prop="nailsStatus">
        <el-select v-model="queryParams.nailsStatus" placeholder="请选择指甲" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="过长" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="外伤：" prop="traumaStatus">
        <el-select v-model="queryParams.traumaStatus" placeholder="请选择外伤" clearable size="small">
          <el-option label="正常" :value="0" />
          <el-option label="异常" :value="1" />
          <el-option label="未检查" :value="2" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item  v-for="(item ,index) in diseaseType" :key="index" :label="item.label" :prop="item.prop">
               <el-select v-model="queryParams[item.prop]" placeholder="请选择疾病类型" clearable size="small">
               <el-option v-for="(items,index ) in optionList" :key="index" :label="items.name" :value="items.value" />
             </el-select>
           </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="checkList" style="height: 100%;width: 100%;">
      <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
      <el-table-column align="center" label="园所名称" prop="schoolName"></el-table-column>
      <el-table-column align="center" label="班级" prop="className"></el-table-column>
      <el-table-column align="center" label="学生姓名" prop="name"></el-table-column>
      <el-table-column align="center" label="性别" prop="studentSex" :formatter="sexFormat"></el-table-column>
      <el-table-column align="center" label="年龄" prop="studentAge"></el-table-column>
      <el-table-column align="center" label="身高" prop="heightStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.heightStatus == '0'">正常</div>
          <div v-if="scope.row.heightStatus == '1'" class="classColor">偏低</div>
          <div v-if="scope.row.heightStatus == '2'" class="classColor">过高</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="体重/kg" prop="weightStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.weightStatus == '0'">正常</div>
          <div v-if="scope.row.weightStatus == '1'" class="classColor">偏瘦</div>
          <div v-if="scope.row.weightStatus == '2'" class="classColor">偏胖</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="体温/°C" prop="temperatureStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.temperatureStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.temperatureStatus == '0'">正常</div>
          <div v-if="scope.row.temperatureStatus == '2'" class="classColor">未检查</div>
          <div v-if="scope.row.temperatureStatus == '3'" class="classColor">未检出</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="牙齿" prop="teethStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.teethStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.teethStatus == '0'">正常</div>
          <div v-if="scope.row.teethStatus == '2'" class="classColor">未检查</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="眼睛" prop="eyeStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.eyeStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.eyeStatus == '0'">正常</div>
          <div v-if="scope.row.eyeStatus == '2'" class="classColor">未检查</div>
        </template>
      </el-table-column>
      <!-- <el-table-column  align="center" label="咽喉"  prop="shijia"></el-table-column> -->
      <el-table-column align="center" label="手部" prop="handStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.handStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.handStatus == '0'">正常</div>
          <div v-if="scope.row.handStatus == '2'" class="classColor">未检查</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="口腔" prop="oralStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.oralStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.oralStatus == '0'">正常</div>
          <div v-if="scope.row.oralStatus == '2'" class="classColor">未检查</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="指甲" prop="nailsStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.nailsStatus == '1'" class="classColor">过长</div>
          <div v-if="scope.row.nailsStatus == '0'">正常</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="外伤" prop="traumaStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.traumaStatus == '1'" class="classColor">异常</div>
          <div v-if="scope.row.traumaStatus == '0'">正常</div>
          <div v-if="scope.row.traumaStatus == '2'" class="classColor">未检查</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>
<script>
import { schoolList, clazzList } from "@/api/qu/qyyerygk";
import { checkAbnormald } from "@/api/qu/qyyecjzx";
import moment from "moment";
export default {
  name: "ysgyxx",
  data() {
    return {
      dateTime: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      checkList: [],
      schoolList: [],
      classOptions: [],
      // 性别字典
      sexOptions: [],
      qyOptions: [],
      queryParams: {
        name: '',
        class: '',
        pageNum: 1,
        pageSize: 10,
        heightStatus: '',
        weightStatus: '',
        temperatureStatus: '',
        teethStatus: '',
        eyeStatus: '',
        handStatus: '',
        oralStatus: '',
        nailsStatus: '',
        traumaStatus: '',
      },
      loading: false,
      total: 0,
    }
  },
  created() {
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getList()
    this.getschoolList()
  },
  mounted() {

  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const obj = {
          kigId: this.queryParams.name,
          classId: this.queryParams.class,
          checkDate: moment(this.dateTime).format("YYYY-MM-DD"),
          traumaStatus: this.queryParams.traumaStatus,
          heightStatus: this.queryParams.heightStatus,
          weightStatus: this.queryParams.weightStatus,
          temperatureStatus: this.queryParams.temperatureStatus,
          teethStatus: this.queryParams.teethStatus,
          eyeStatus: this.queryParams.eyeStatus,
          handStatus: this.queryParams.handStatus,
          oralStatus: this.queryParams.oralStatus,
          nailsStatus: this.queryParams.nailsStatus,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }
        const data = await checkAbnormald(obj);
        this.checkList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    //获取学校列表
    async getschoolList() {
      const data = await schoolList();
      this.schoolList = data.rows;

    },
    selectSchool() {
      this.getClazzList()
    },
    onChangeDate() { },
    //clazzList 获取班级列表
    async getClazzList() {
      try {
        const obj = {
          schoolCode: this.queryParams.name,
        }
        const data = await clazzList(obj)
        this.classOptions = data.rows;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.studentSex);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        name: '',
        class: '',
        pageNum: 1,
        pageSize: 10,
        heightStatus: '',
        weightStatus: '',
        temperatureStatus: '',
        teethStatus: '',
        eyeStatus: '',
        handStatus: '',
        oralStatus: '',
        nailsStatus: '',
        traumaStatus: '',
      },
        this.dateTime = new Date(),
        this.resetForm("queryForm");
      this.handleQuery();
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
    },
  }
};
</script>
<style lang="scss" scoped>
.title {
  font-weight: 700;
  text-align: center;
}

.top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 450px;
  // border: 1px red solid;
  margin: 10px 10px 30px 10px;

  .one {
    width: 45%;
    height: 100%;
    // border: 1px rgb(0, 255, 76) solid;
    // background-color: rgb(255, 255, 255);
    // border: 1px solid #9CD2FF;
    // border-radius: 4px;
    padding: 20px;

    .oneCharts {
      margin-top: 30px;
      width: 100%;
      height: 80%;
    }
  }

  .two {
    width: 45%;
    height: 100%;
    padding: 20px;

    //     background-color: rgb(255, 255, 255);
    //  border: 1px solid #9CD2FF;
    //   border-radius: 4px;
    // border: 1px rgb(68, 0, 255) solid;
    .twoCharts {
      margin-top: 30px;
      width: 100%;
      height: 75%;
    }
  }
}

.bottom {
  width: 100%;
  height: 450px;
  padding: 20px;
  // background-color: rgb(255, 255, 255);
  //  border: 1px solid #9CD2FF;
  //   border-radius: 4px;
  margin: 10px 10px 0px 10px;

  .threeCharts {
    width: 100%;
    height: 100%;
  }
}

.classColor{
  color: red;
  font-weight: 600;
}
</style>
